<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影忍者结印小游戏</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
    <script src="./index.js" defer></script>
</head>

<body>
    <div id="app" class="app">
        <!-- 技能和按键参考部分 -->
        <div class="skillTable">
            <p class="title">技能结印参考表</p>
            <table>
                <thead>
                    <tr>
                        <th style="width: 150px;">技能名称</th>
                        <th>结印顺序（按键顺序）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="skill in tables">
                        <td>{{skill.name}}</td>
                        <td>{{skill.printingSequence.map(k=>`${k}(${keyMap[k].keyName})`).join("->")}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 结印输出区 -->
        <div class="output">
            <div class="skillList">
                当前结印：
            </div>
            <div class="text">
                {{nowPrintings.join("->")}}
            </div>

        </div>
    </div>
</body>

</html>